<%@ include file="/en/jsp/static.jsp" %>
<%@ page import="java.util.*" %>

<%
  String TOP_PANE = (String)request.getAttribute("TOP_PANE");
  String BOTTOM_PANE = (String)request.getAttribute("BOTTOM_PANE");

  String SHOW_SIDEMENU = "";
  String tmp = (String)request.getAttribute("SHOW_SIDEMENU");
  if (tmp != null && Boolean.valueOf(tmp).booleanValue())
    SHOW_SIDEMENU = " checked ";

  String SHOW_PULLDOWNMENU = "";
  tmp = (String)request.getAttribute("SHOW_PULLDOWNMENU");
  if (tmp != null && Boolean.valueOf(tmp).booleanValue())
    SHOW_PULLDOWNMENU = " checked ";

  int COLUMNS = Integer.parseInt((String)request.getAttribute("COLUMNS"));
  String[] COLUMN1 = null, COLUMN2= null, COLUMN3=null;
  COLUMN1 = (String[])request.getAttribute("COLUMN1");
  if (COLUMNS >= 2)
    COLUMN2 = (String[])request.getAttribute("COLUMN2");
  if (COLUMNS >= 3)
    COLUMN3 = (String[])request.getAttribute("COLUMN3");

  Iterator it = null;
  Map modules = BoxStatic.mainConfig.getHomePageModules();
%>

<jsp:include page="/en/jsp/header.jsp" flush="true"/>

<script LANGUAGE="JavaScript">
function onAdd(theSelect)
{
  var options = document.theForm.MODULES.options;
  if ( options.length > 0)
  {
    for (i=0; i<options.length;i++)
    {
      var curLenght = theSelect.length;
      if (options[i].selected == true)
      {
        var found = false;
        for(j=0; j < curLenght; j++)
        {
          if (theSelect.options[j].value == options[i].value)
          {
            found = true;
            break;
          }
        }
        if (!found)
        {
          var option = new Option(options[i].text, options[i].value);
          theSelect.options[curLenght] = option;
        }
      }
    }
  }
}

function onRemove(theSelect)
{
  var options = theSelect.options;
  if ( options.length > 0)
  {
    for (i=options.length-1; i >=0; i--)
    {
      if (options[i].selected == true)
        options[i] = null;
    }
  }
//	document.theForm.CATEGORIES.focus();
}

//select all the items so they will be sent out
function onSubmit()
{
  if (document.theForm.COLUMN1 != null)
    selectAll(document.theForm.COLUMN1.options);

  if (document.theForm.COLUMN2 != null)
    selectAll(document.theForm.COLUMN2.options);

  if (document.theForm.COLUMN3 != null)
    selectAll(document.theForm.COLUMN3.options);
}

function doSubmit()
{
  alert("TODO: Hide/Show the other columns!!!");
  
  if (document.theForm.COLUMNS.value == 1)
  {
    for(i=0; i< oTable.rows.length; i++)
    {
      if (oTable.rows(i).cells.length >2)
        oTable.rows(i).deleteCell(2);
      if (oTable.rows(i).cells.length >1)
        oTable.rows(i).deleteCell(1);
    }
  }
  else  if (document.theForm.COLUMNS.value == 2)
  {
    for(i=0; i< oTable.rows.length; i++)
    {
      if (oTable.rows(i).cells.length >2)
        oTable.rows(i).deleteCell(2);
    }
  }
  else  if (document.theForm.COLUMNS.value == 3)
  {
  }

}

function selectAll(options)
{
  if ( options.length > 0)
  {
    for (i=options.length-1; i >=0; i--)
    {
      options[i].selected = true;
    }
  }
}

</script>

<FORM action="<%=BoxStatic.servletDir%>BoxHomeSettingsAction" method=get name=theForm>

<table width="100%" height=26 align=middle border=0 cellpadding=0 cellspacing=0 bgcolor="#f4f4f4" style="font-size:16px;color:#d05000">
<tr><td>
    &nbsp;<img src="<%=BoxStatic.imageDir%>itemball.jpg" width=14 height=15 border=0 align="absmiddle">
    <b><%=boxName%> - My Box Home Settings</b>
</td></tr>
</table>

<hr width="100%" color=#E06000 align=left>

<TABLE cellSpacing=1 cellPadding=1 width="100%" border=1>
  <TBODY>
  <tr>
    <td colspan=2>
      <input type=submit value="Save"  name="SubmitSave"  onclick="onSubmit()">
      <input type=button value="Cancel" onclick="window.history.back()" >
    </td>
  </tr>

  <tr bgcolor=#7EC1F3>
    <td colspan=2><font size="+1">Home Page Navigation</font></td>
  </tr>
  <tr>
    <td colspan=2><input type="checkbox" name="SHOW_SIDEMENU" value="true" <%=SHOW_SIDEMENU%>>
      Show side menu</td>
  </tr>
  <tr>
    <td colspan=2><input type="checkbox" name="SHOW_PULLDOWNMENU" value="true" <%=SHOW_PULLDOWNMENU%>>Show pulldown menu</td>
  </tr>
  <tr bgcolor=#7EC1F3>
    <td colspan=2><font size="+1">Home page layout</font></td>
  </tr>
  <tr>
    <td colspan=2>Select the following modules and click Add Module
      button to add the modules to the panel </td>
  </tr>
  <TR>
    <TD width="15%">The avaliable modules:</TD>
    <TD width="85%"> Select the module in top pane:
      <select name=TOP_PANE>
        <option></option>
<%
        boolean selected = false;
        it = modules.keySet().iterator();
        while (it.hasNext())
        {
          tmp = it.next().toString();
          out.print("<option value=\"");
          out.print(tmp);
          out.print("\"");
          if (TOP_PANE != null && TOP_PANE.compareTo(tmp) == 0)
          {
            out.print(" selected ");
            selected = true;
          }
          out.print(">");
          out.print(tmp);
          out.println("</option>");
        }
        if (! selected)
          out.println("<option  selected></option>");
%>
      </select>
    </TD>
  </TR>
  <TR>
    <TD width="15%">
      <select multiple size=10 name=MODULES>
<%
        it = modules.keySet().iterator();
        while (it.hasNext())
        {
          tmp = it.next().toString();
          out.print("<option value=\"");
          out.print(tmp);
          out.print("\"");
          out.print(">");
          out.print(tmp);
          out.println("</option>");
        }
%>
    </TD>
    <TD valign="top" width="85%">
      <TABLE ID=oTable cellSpacing=0 cellPadding=0 width="100%" border=0>
        <TBODY>
        <TR>
          <TD>
            Setting the middle pane. Display
            <select name="COLUMNS" size="1" onChange="doSubmit()">
              <option value=1 <% if (COLUMNS==1) out.print(" selected ");%>>One column</option>
              <option value=2 <% if (COLUMNS==2) out.print(" selected ");%>>Two columns</option>
              <option value=3 <% if (COLUMNS==3) out.print(" selected ");%>>Three columns</option>
            </select>.
          </td>
        </TR>
        <TR>
          <TD valign="top">
            <table width="100%" border=1>
        <%  if (COLUMNS==1)
            {
        %>
              <tr valign="top" align="center">
                <td height="1">
                  <input onClick=onAdd(document.theForm.COLUMN1) type=button value="Add Module" name=AddMiddle2>
                </td>
              </tr>
              <tr>
                <td>
                  <select name="COLUMN1" size="5" multiple >
                  <%
                    if (COLUMN1!=null)
                    {
                      for(int i = 0; i < COLUMN1.length; i++)
                      {
                        out.print("<option value=\"");
                        out.print(COLUMN1[i]);
                        out.print("\">");
                        out.print(COLUMN1[i]);
                        out.println("</option>");
                      }
                    }
                  %>
                  </select>
                </td>
              </tr>
              <tr valign="top" align="center">
                <td height="1">
                  <input onClick=onRemove(document.theForm.COLUMN1) type=button value="Remove Module" name=RemoveTop>
                </td>
              </tr>
        <%  }
            else if (COLUMNS==2)
            {
        %>
              <tr valign="top" align="center">
                <td height="1">
                  <input onClick=onAdd(document.theForm.COLUMN1) type=button value="Add Module" name=AddMiddle2>
                </td>
                <td height="1">
                  <input onClick=onAdd(document.theForm.COLUMN2) type=button value="Add Module" name=AddMiddle3>
                </td>
              </tr>
              <tr>
                <td>
                  <select name="COLUMN1" size="5" multiple >
                  <%
                    if (COLUMN1!=null)
                    {
                      for(int i = 0; i < COLUMN1.length; i++)
                      {
                        out.print("<option value=\"");
                        out.print(COLUMN1[i]);
                        out.print("\">");
                        out.print(COLUMN1[i]);
                        out.println("</option>");
                      }
                    }
                  %>
                  </select>
                </td>
                <td>
                  <select name="COLUMN2" size="5" multiple>
                  <%
                    if ( COLUMN2 != null)
                    {
                      for(int i = 0; i < COLUMN2.length; i++)
                      {
                        out.print("<option value=\"");
                        out.print(COLUMN2[i]);
                        out.print("\">");
                        out.print(COLUMN2[i]);
                        out.println("</option>");
                      }
                    }
                  %>
                  </select>
                </td>
              </tr>
              <tr valign="top" align="center">
                <td height="1">
                  <input onClick=onRemove(document.theForm.COLUMN1) type=button value="Remove Module" name=RemoveTop>
                </td>
                <td height="1">
                  <input onClick=onRemove(document.theForm.COLUMN2) type=button value="Remove Module" name=RemoveTop2>
                </td>
              </tr>
        <%  }
            else //3 columns
            {
        %>
              <tr valign="top" align="center">
                <td height="1">
                  <input onClick=onAdd(document.theForm.COLUMN1) type=button value="Add Module" name=AddMiddle2>
                </td>
                <td height="1">
                  <input onClick=onAdd(document.theForm.COLUMN2) type=button value="Add Module" name=AddMiddle3>
                </td>
                <td height="1">
                  <input onClick=onAdd(document.theForm.COLUMN3) type=button value="Add Module" name=AddMiddle4>
                </td>
              </tr>
              <tr>
                <td>
                  <select name="COLUMN1" size="5" multiple >
                  <%
                    if (COLUMN1!=null)
                    {
                      for(int i = 0; i < COLUMN1.length; i++)
                      {
                        out.print("<option value=\"");
                        out.print(COLUMN1[i]);
                        out.print("\">");
                        out.print(COLUMN1[i]);
                        out.println("</option>");
                      }
                    }
                  %>
                  </select>
                </td>
                <td>
                  <select name="COLUMN2" size="5" multiple>
                  <%
                    if ( COLUMN2 != null)
                    {
                      for(int i = 0; i < COLUMN2.length; i++)
                      {
                        out.print("<option value=\"");
                        out.print(COLUMN2[i]);
                        out.print("\">");
                        out.print(COLUMN2[i]);
                        out.println("</option>");
                      }
                    }
                  %>
                  </select>
                </td>
                <td>
                  <select name="COLUMN3" size="5" multiple>
                  <%
                    if ( COLUMN3 != null)
                    {
                      for(int i = 0; i < COLUMN3.length; i++)
                      {
                        out.print("<option value=\"");
                        out.print(COLUMN3[i]);
                        out.print("\">");
                        out.print(COLUMN3[i]);
                        out.println("</option>");
                      }
                    }
                  %>
                  </select>
                </td>
              </tr>
              <tr valign="top" align="center">
                <td height="1">
                  <input onClick=onRemove(document.theForm.COLUMN1) type=button value="Remove Module" name=RemoveTop>
                </td>
                <td height="1">
                  <input onClick=onRemove(document.theForm.COLUMN2) type=button value="Remove Module" name=RemoveTop2>
                </td>
                <td height="1">
                  <input onClick=onRemove(document.theForm.COLUMN3) type=button value="Remove Module" name=RemoveTop3>
                </td>
              </tr>
        <%  }
        %>
            </table>
          </TD>
        </TR>
        </TBODY>
      </TABLE>
    </TD>
  </TR>
  <TR>
    <TD width="15%">&nbsp;</TD>
    <TD width="85%"> Select the module in bottom pane:
      <select name=BOTTOM_PANE>
        <option></option>
<%
        selected = false;
        it = modules.keySet().iterator();
        while (it.hasNext())
        {
          tmp = it.next().toString();
          out.print("<option value=\"");
          out.print(tmp);
          out.print("\"");
          if (BOTTOM_PANE != null && BOTTOM_PANE.compareTo(tmp) == 0)
          {
            out.print(" selected ");
            selected = true;
          }
          out.print(">");
          out.print(tmp);
          out.println("</option>");
        }
        if (! selected)
          out.println("<option  selected></option>");
%>
      </select>
    </TD>
  </TR>
  </TBODY>
</TABLE>


<hr width="100%" color=#E06000 align=left>

</FORM>

<jsp:include page="/en/jsp/footer.jsp" flush="true"/>
